<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleFormRef"
    label-width="120px"
    class="service-event-form"
  >
    <el-row>
      <el-col
        :xs="24"
        :sm="12"
        :lg="10"
        :xl="6"
      >
        <el-form-item
          label="中文名称"
          prop="nameCn"
        >
          <el-input
            v-model="ruleForm.nameCn"
            @change="reRenderFlow"
          />
        </el-form-item>
      </el-col>
      <el-col
        :xs="24"
        :sm="12"
        :lg="10"
        :xl="6"
      >
        <el-form-item
          label="英文名称"
          prop="name"
        >
          <el-input
            v-model="ruleForm.name"
            @change="reRenderFlow"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col
        :xs="24"
        :sm="12"
        :lg="10"
        :xl="6"
      >
        <el-form-item
          label="部门"
          prop="orgId"
        >
          <DeptFormSelect
            width="100%"
            ref="deptFormSelect"
            :name="ruleForm.orgName"
            :placeholder="`选择部门`"
            v-model:dept="ruleForm.orgId"
          />
        </el-form-item>
      </el-col>
      <el-col
        :xs="24"
        :sm="12"
        :lg="10"
        :xl="6"
      >
        <el-form-item
          label="事件"
          prop="eventId"
        >
          <EventSelect
            v-model="ruleForm.eventId"
            v-model:name="ruleForm.eventName"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col
        :xs="24"
        :sm="12"
        :lg="10"
        :xl="6"
      >
        <el-form-item
          label="激活状态"
          prop="activated"
        >
          <el-switch
            v-model="ruleForm.activated"
            active-text="启用"
            inactive-text="禁用"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
      </el-col>
    </el-row>

  </el-form>
</template>

<script lang="jsx">
import { ref, computed } from "vue"
import { ElMessage } from "element-plus"
import DeptFormSelect from "@/components/DeptFormSelect"
import EventSelect from "@/components/EventSelect/index.js"
import eventBus from '../eventbus'

export default {
  name: "MeansServiceEventEditPageBaseForm",
  emits: ['update:modelValue'],
  props: {
    modelValue: {
      type: Object,
      default: () => { }
    }
  },
  components: {
    DeptFormSelect,
    EventSelect
  },
  setup (props, { emit }) {
    const ruleFormRef = ref(null)
    const checkFlowName = (rule, value, callback) => {
      if (!/^[A-Za-z0-9]+$/.test(value)) {
        callback('请输入英文（可包含数字）')
      } else if (/^\d+$/.test(value)) {
        callback('名称请包含英文')
      } else {
        callback()
      }
    }

    const ruleForm = computed({
      get: () => props.modelValue,
      set: val => {
        emit('update:modelValue', val)
      }
    })
    const rules = ref({
      nameCn: [{ required: true, message: '请输入中文名称', trigger: 'blur' }],
      name: [{ required: true, message: '请输入英文名称', trigger: 'blur', validator: checkFlowName }]
    })

    const reRenderFlow = () => {
      eventBus.$emit('change-name')
    }

    /**
     * 对表单校验，此方法用于父组件调用
     * @returns Promise.resolve(Boolean)
     */
    const validateForm = async () => {
      return new Promise((resolve, reject) => {
        ruleFormRef.value.validate((valid, fields) => {
          if (!valid) {
            ElMessage.warning('请根据表单上的提示进行修改')
          }
          resolve(valid)
        })
      })
    }

    return {
      ruleFormRef,
      ruleForm,
      rules,
      reRenderFlow,
      validateForm
    }
  }
}
</script>

<style lang="scss" scoped>
.service-event-form {
  .label {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #3c475d;
    line-height: 22px;

    &::before {
      margin-right: 10px;
      content: " ";
      display: inline-block;
      width: 4px;
      height: 16px;
      background: #2e69eb;
    }
  }

  .params-table {
    width: 100%;

    .el-table--fit,
    :deep(.el-scrollbar),
    :deep(.el-scrollbar__wrap),
    :deep(.el-table__body-wrapper) {
      height: auto !important;
    }
  }
}
</style>